<template>
  <view>
    <u-navbar title="选择售后类型"></u-navbar>
    <view class="order-goods" v-for="(goodsInfo, index) in goodsInfo1" :key="index">
      <u-icon class="goods-img" :name="goodsInfo.picUrl" size="160"></u-icon>
      <view class="orde-riget">
        <view class="goods-title">
          {{ goodsInfo.spuName }}
        </view>
        <view class="goods-speci">
          {{
            goodsInfo.properties && goodsInfo.properties.length > 0
              ? goodsInfo.properties[0].valueName
              : ''
          }}
          <text class="goods-num">x{{ goodsInfo.count }}</text>
        </view>
        <view class="goods-price"> ¥{{ (goodsInfo.price * 0.01).toFixed(2) }} </view>
      </view>
    </view>

    <view class="item-view" @click="routeTo(20)">
      <u-icon name="/static/img/tui1.png" size="50"></u-icon>
      <view class="item-view-desc">
        <view>我要退货退款</view>
        <p>已收到货，需要退还已收到的货物</p>
      </view>
      <u-icon class="more" name="/static/img/more.png" size="20"></u-icon>
    </view>

    <view class="item-view" @click="routeTo(10)">
      <u-icon name="/static/img/tui2.png" size="50"></u-icon>
      <view class="item-view-desc">
        <view>我要退款（无需退货）</view>
        <p>未收到货，或与商家协商之后申请</p>
      </view>
      <u-icon class="more" name="/static/img/more.png" size="20"></u-icon>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      goodsInfo1: [],
      goodsJosn: ''
    }
  },
  onLoad(res) {
    this.id = res.id
    this.goodsInfo1 = JSON.parse(res.goodsJson)
    this.goodsJosn = res.goodsJson
  },
  methods: {
    routeTo(e) {
      uni.navigateTo({
        url:
          '/other/apply-after-sales/apply-after-sales?way=' +
          e +
          '&id=' +
          this.id +
          '&goodsJson=' +
          this.goodsJosn
      })
    }
  }
}
</script>

<style>
page {
  background: #f0f1f2;
  padding: 20rpx;
}
.order-goods {
  display: flex;
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.goods-img {
  border-radius: 20rpx;
}

.orde-riget {
  width: 100%;
  margin-left: 10rpx;
  line-height: 55rpx;
  font-size: 26rpx;
}

.goods-speci {
  position: relative;
}

.goods-num {
  position: absolute;
  top: 0;
  right: 0;
  color: #999999;
}

.goods-price {
  font-size: 30rpx;
  color: #f54831;
}

.item-view {
  height: 200rpx;
  background-color: #fff;
  padding: 20rpx;
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.item-view-desc {
  line-height: 50rpx;
  margin-left: 20rpx;
}
.item-view-desc view {
  font-size: 32rpx;
}
.item-view-desc p {
  color: #999999;
}
.more {
  margin-left: 140rpx;
}
</style>
